<template>
  <div id="data-view">
    <!-- <dv-full-screen-container> -->
    <div class="main-header">
      <div class="mh-left">

      </div>
      <div class="mh-middle">
        武钢青山ZR11磨辊间数据中心
      </div>
      <div class="mh-right">
        <dv-border-box-2 @click="to"
          style="width: 140px; height: 50px; line-height: 50px; text-align:center;margin:20px 0 0 150px;cursor: pointer;">
          磨辊间主视图
        </dv-border-box-2>
      </div>
    </div>

    <dv-border-box-1 class="main-container">
      <dv-border-box-3 class="left-chart-container">
        <Left-Chart-1 />
        <Left-Chart-2 />
      </dv-border-box-3>

      <div class="right-main-container">


        <dv-border-box-13 class="rmc-bottom-container">
          <div class="transparent-table">
            <table>
              <tr>
                <th>轧辊类型</th>
                <th>辊架号</th>
                <th>层号</th>
                <th>直径范围(mm)</th>
                <th>粗糙度范围</th>
                <th>轧辊状态</th>
                <th>详情</th>
              </tr>
              <tr>
                <td>支撑辊</td>
                <td>A1</td>
                <td>2</td>
                <td>13-15</td>
                <td>精</td>
                <td>新辊</td>
                <td>
                  <el-button type="primary" size="mini" class="button" color="#36f">详情</el-button>
                </td>
              </tr>
            </table>
          </div>
        </dv-border-box-13>
        <div class="rmc-top-container">
          <dv-border-box-3 class="rmctc-left-container">
            <dv-scroll-board :config="config" style="width:100%;height:100%;cursor: pointer;"
              @mouseover="mouseoverHandler" @click="clickHandler" />
          </dv-border-box-3>

          <div class="rmctc-right-container">
            <dv-border-box-3 class="rmctc-chart-1">
              <!-- <Left-Chart-3 style="height: 100%;" /> -->

            </dv-border-box-3>
            <!-- 
              <dv-border-box-4 class="rmctc-chart-2" :reverse="true">
                <Right-Chart-2 />
              </dv-border-box-4> -->
          </div>
        </div>
      </div>
    </dv-border-box-1>
    <!-- </dv-full-screen-container> -->
    <el-dialog v-model="dialogVisible" title="详情" width="50%" draggable>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>

import { onMounted, ref, reactive } from 'vue';
import { useRouter } from "vue-router";//引入路由
// import LeftChart1 from './LeftChart1.vue'
import LeftChart1 from '../components/LeftChart1.vue'
import LeftChart2 from '../components/LeftChart2.vue'
import LeftChart3 from '../components/LeftChart3.vue'
import { piniaData } from '@/store';//引入pinia状态管理
// import LeftChart3 from './LeftChart3.vue'
// import CenterCmp from './CenterCmp.vue'
// import RightChart1 from './RightChart1.vue'
// import RightChart2 from './RightChart2.vue'
// import BottomCharts from './BottomCharts.vue'
const router = useRouter();
const dialogVisible = ref(false)
const store = piniaData()
const to = () => {
  router.push({ path: '/RollRoom' })
  store.active = '/RollRoom'
}
const config = reactive({
  header: ['类别', '内容', '时间'],
  data: [
    ['排产', '从A1搬运至A2从A1搬运至A2从A1搬运至A2从A1搬运至A2', '2024-09-04'],
    ['设备', '从A2搬运至A1从A1搬运至A2', '2024-09-04'],
    ['排产', '从A3搬运至A2从A1搬运至A2', '2024-09-04'],
    ['排产', '从A4搬运至A2从A1搬运至A2', '2024-09-04'],
    ['设备', '从A5搬运至A2从A1搬运至A2', '2024-09-04'],
    ['设备', '从A6搬运至A2', '2024-09-04'],
    ['排产', '从A7搬运至A2', '2024-09-04'],
    ['设备', '从A8搬运至A2', '2024-09-04'],
    ['设备', '从A14搬运至A2', '2024-09-04'],
    ['排产', '从A15搬运至A2', '2024-09-04'],
  ],
  index: true,
  indexHeader: "序号",
  headerBGC: "",
  oddRowBGC: "#464d5b90",
  evenRowBGC: "#41444f80",
  columnWidth: [50, 160, 560],
  align: ['left'],
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  // dialogVisible.value = true;
  console.log(e)
}
</script>

<style lang="less">
.transparent-table {
  width: 99%;
  margin: 15px auto;
  //   background: rgba(255, 255, 255, 0.5); /* 半透明的白色背景 */
  //   border: 2px solid #2862b7; /* 单元格边框 */

}

.transparent-table table {
  background-color: transparent;
  /* 表格背景透明 */
  border-collapse: collapse;

  /* 边框合并 */
  th {
    background: rgba(255, 255, 255, 0.5);
    /* 半透明的白色背景 */
  }
}

.transparent-table th,
.transparent-table td {
  width: 200px;
  border-bottom: 1px solid #2862b7;
  /* 单元格边框 */

  padding: 8px;
  /* 单元格内边距 */
  text-align: left;
  /* 文本对齐 */
}


#data-view {
  width: 100vw;
  height: 100vh;
  //   background-color: #030409;
  color: #fff;
  background-image: url('../assets/bg.png');
  background-size: 100%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;

  .main-header {
    height: 62px;
    margin-top: 10px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-size: 100%;
    background-image: url("../assets/top.png");

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 23%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 50%;
    display: flex;
  }

  .rmctc-left-container {
    padding: 10px;
    width: 100%;
    height: 95%;
  }

  .rmctc-right-container {
    width: 45%;
    height: 100%;
  }

  .rmc-bottom-container {
    height: 50%;
  }

  .rmctc-chart-1 {
    padding: 10px;
    height: 95%;
  }
}
</style>
